<template>
    <el-container v-loading="loading">
        <el-header>
            <el-select v-model="article.categoryId" placeholder="请选择文章栏目">
                <el-option
                        v-for="item in categories"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-input class="title" placeholder="请输入标题" v-model="article.title"></el-input>
            <el-tag :key="tagName" v-for="tagName in article.tagNames" closable
                    :disable-transitions="false" @close="handleClose(tagName)">
                {{tagName}}
            </el-tag>
            <el-input class="tag" v-if="inputVisible" v-model="inputValue" ref="tagInput" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
            <el-button type="primary" size="small" @click="showInput">+Tag</el-button>
        </el-header>

        <el-main>
            <mavon-editor class="mavon-editor-box" v-model="article.mdContent"
                          @imgAdd="imgAdd" @imgDel="imgDel" ref="mdEditor"/>
        </el-main>

        <el-footer>
            <el-button @click="giveUp" v-if="showGiveUpBtn">放弃修改</el-button>
            <el-button type="primary" @click="editBlog(1)" v-if="showGiveUpBtn && showStoreBtn">保存修改
            </el-button>
            <el-button @click="editBlog(0)" v-if="!showStoreBtn">保存到草稿箱</el-button>
            <el-button type="primary" @click="editBlog(1)" v-if="!showStoreBtn">
                发表文章
            </el-button>
        </el-footer>
    </el-container>
</template>

<script>
    // 局部引入MD编辑插件mavonEditor
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import {get, post} from "../utils/api";

    export default {
        components: {mavonEditor},
        data() {
            return {
                loading: false,
                categories: [],
                showGiveUpBtn: false,
                showStoreBtn: false,
                article: {
                    title: '',
                    categoryId: '',
                    mdContent: '',
                    tagNames: [],
                },
                inputVisible: false,
                inputValue: '',
            }
        },
        mounted() {
            this.getAllCategories();
            let id = this.$route.query.id;
            if (id != null) {
                this.showGiveUpBtn = true;
                this.getArticleById(id);
            }
        },
        methods: {
            getArticleById(id) {
                this.loading = true;
                get('/article/details', {id: id}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.article = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            },

            getAllCategories() {
                this.loading = true;
                get('/admin/category/all').then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.categories = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            },
            handleClose(tagName) {
                this.article.tagNames.splice(this.article.tagNames.indexOf(tagName), 1);

            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.article.tagNames.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => this.$refs.tagInput.$refs.input.focus());
            },
            imgAdd() {
            },
            imgDel() {
            },
            giveUp() {
                this.$router.replace('/articleList');
            },

            editBlog(state) {
                if (this.$route.query.id != null) {
                    this.updateBlog(state)
                } else {
                    this.addBlog(state);
                }
            },
            updateBlog(state) {
                if (this.article.categoryId == null) {
                    this.$message.warning('请选择文章类型');
                    return;
                }
                if (this.article.title == null || this.article.title.trim().length === 0) {
                    this.$message.warning('请填写文章标题');
                    return;
                }
                if (this.article.mdContent == null || this.article.mdContent.trim().length === 0) {
                    this.$message.warning('请编辑文章内容');
                    return;
                }
                post('/article/edit', {
                    id: this.$route.query.id,
                    title: this.article.title,
                    mdContent: this.article.mdContent,
                    htmlContent: this.$refs.mdEditor.d_render,
                    categoryId: this.article.categoryId,
                    state: state,
                    tagNames: this.article.tagNames
                }).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$message.success(res.msg);
                        window.bus.$emit('articleListReload');
                        window.bus.$emit('menuRefresh');
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            },

            addBlog(state) {
                if (this.article.categoryId == null) {
                    this.$message.warning('请选择文章类型');
                    return;
                }
                if (this.article.title == null || this.article.title.trim().length === 0) {
                    this.$message.warning('请填写文章标题');
                    return;
                }
                if (this.article.mdContent == null || this.article.mdContent.trim().length === 0) {
                    this.$message.warning('请编辑文章内容');
                    return;
                }
                post('/article/add', {
                    title: this.article.title,
                    mdContent: this.article.mdContent,
                    htmlContent: this.$refs.mdEditor.d_render,
                    categoryId: this.article.categoryId,
                    state: state,
                    tagNames: this.article.tagNames
                }).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$message.success(res.msg);
                        window.bus.$emit('articleListReload');
                        window.bus.$emit('menuRefresh');
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            }
        },
    }
</script>

<style scoped lang="stylus">
    .el-container {
        background-color #efefef
        margin-top 20px

        .el-header {
            display flex
            align-items center

            .title {
                width 300px
                margin 0 10px
            }

            .tag {
                width 100px
                margin 0 5px
            }

            .el-tag {
                margin 0 5px
            }
        }

        .el-main {
            .mavon-editor-box {
                height 450px
            }
        }


        .el-footer {
            display flex
            justify-content flex-end
            align-items center
        }
    }
</style>
